<template>
  <!-- 直播数据大屏 -->
  <div id="live1">
    <div class="app_loading" v-if="isPageLoading">
      <!-- <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div> -->
      <div
        v-loading="true"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
    </div>
    <div class="notVipBoxNewWl" v-if="!isPageLoading && hasShow">
      <div class="img_bg_box">
        <img
          :src="$global.staticUrl + 'image/egImg/livebig2.png'"
          class="egBgImg"
        />
      </div>
      <div class="payVipBox">
        <payVip
          routerName="liveEg"
          :lowestVipNum="vipRootObj[4][27].ownerMinLevel"
        />
      </div>
    </div>
    <div class="live1_box" v-if="!isPageLoading && !hasShow">
      <div class="header_bg"></div>
      <div>
        <header>
          <!--  -->
          <section>
            <div class="header">
              <div class="headerleft">
                <img
                  class="zsjxlogo"
                  @click="$router.push('/')"
                  src="@/assets/liu/zsjx.png"
                  alt
                />
              </div>
              <div class="heacenter">
                <div
                  class="logo"
                  :class="response01 && response01.status != 1 ? 'jslogo' : ''"
                >
                  <img
                    v-if="logo"
                    @click="go_to_page_talent(response01.author_id)"
                    :src="logo"
                    v-errorImg:talent
                  />
                </div>
                <div class="cenrig">
                  <div>
                    <div
                      class="livegif"
                      v-if="response01 && response01.status == 1"
                    >
                      <p style="margin-top: 0.5px" class="livingGif">
                        <span class="span"></span>
                        <span class="span"></span>
                        <span class="span"></span>
                        <span class="span"></span>
                      </p>
                      <p>直播中</p>
                    </div>
                    <div
                      v-if="response01 && response01.status != 1"
                      class="liveend"
                    >
                      直播结束
                    </div>
                    <p
                      class="title"
                      @click="go_to_page_talent(response01.author_id)"
                    >
                      {{ response01 && response01.nickname }}
                    </p>
                    <img src alt />
                    <img
                      v-if="response01 && response01.is_shop == 1"
                      class="shop"
                      src="@/assets/liu/shopcar.png"
                      alt
                    />
                  </div>
                  <div
                    class="name namedetails"
                    @click="godetails(response01.room_id)"
                  >
                    {{ response01 && response01.room_title }}
                  </div>
                  <!-- <div class="name">
                    {{ response01 && response01.room_title }}
                  </div>-->
                </div>
                <div class="time">
                  <div style="height: 16px; margin-bottom: 8px">
                    <img
                      class="start"
                      style="width: 15px; height: 15px; margin-top: -2px"
                      src="@/assets/liu/starttime.png"
                      alt
                    />
                    <span
                      v-if="
                        response01 &&
                        response01.status != 1 &&
                        response01.begin_timestamp
                      "
                    >
                      直播时间 ：{{
                        timestamp(
                          response01 && response01.begin_timestamp,
                          "M-D h:m"
                        )
                      }}&nbsp;&nbsp;
                      <b>/</b>
                      &nbsp;
                      {{
                        timestamp(
                          response01 && response01.end_timestamp,
                          "M-D h:m"
                        )
                      }}
                    </span>
                    <span v-else>
                      直播时间 ：{{
                        timestamp(
                          response01 && response01.begin_timestamp,
                          "M-D h:m"
                        )
                      }}&nbsp; <b>/</b>&nbsp;--
                    </span>
                  </div>
                  <div>
                    <img
                      style="width: 15px; height: 15px; margin-top: -2px"
                      class="end"
                      src="@/assets/liu/endtime.png"
                      alt
                    />
                    <span v-if="response01">
                      直播时长 ：{{
                        format_time(
                          (response01.end_timestamp -
                            response01.begin_timestamp) *
                            1000
                        )
                      }}
                    </span>
                  </div>
                </div>
                <!-- 直播视频 -->
                <div class="plco" v-if="response01 && response01.status == 1">
                  <div class="qr_boxL">
                    <span class="one"></span>
                    <div class="qr">
                      <img src="@/assets/liu/qrbg.png" alt />
                      <vue-qr
                        v-if="response01"
                        :size="105"
                        :margin="0"
                        :auto-color="true"
                        :dot-scale="1"
                        :text="response01.room_qr"
                      />
                      <p>抖音扫码实时直播</p>
                    </div>
                  </div>
                  <!-- 二维码 -->
                  <div @mousemove="mousemove" @mouseout="mouseout">
                    <div @click="playlive" class="liveerweima">
                      <!-- <span class="huam"></span> -->
                      <span>查看直播</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </header>
        <main>
          <div class="leftbox">
            <div class="Traffic public">
              <p class="tit">流量层级</p>
              <div class="trendzl" style="margin-top: 10px; margin-left: 15px">
                <my_line1
                  v-if="flow_chartx"
                  style="height: 250px; width: 438px"
                  :x_data="flow_chartx"
                  :flow_chartxx="flow_chartxx"
                  :y1_data="y_in"
                  :y2_data="y_line"
                  :y3_data="y_avglooktime"
                  name1="进场观众"
                  name2="在线观众"
                  name3="人均看播时长"
                  formatter="1"
                  size="12"
                  yname="人数"
                  yname1="秒"
                  grid_line="false"
                  line_color="rgba(171,231,255,0.3)"
                  font_color="rgba(235,235,235,0.7)"
                />
              </div>
              <div
                v-loading="Newloading"
                v-if="Newloading"
                class="loading"
                element-loading-text="拼命加载中..."
                element-loading-spinner="el-icon-loading"
                :class="{ open_loading: !$store.state.left_nav_flag }"
              ></div>
              <div class="zwsj1" v-if="!Newloading && !flow_chartx">
                <img src="@/assets/liu/kby.png" />
                <p>暂无数据</p>
              </div>
            </div>
            <!--  -->
            <div class="public trend">
              <p class="tit">商品销量趋势</p>
              <p class="goodstotal">
                直播商品总数：
                <span v-if="response01 && response01.livepro">
                  {{ milliFormat(response01.livepro) }}
                </span>
                <span v-if="response01 && !response01.livepro">--</span>
              </p>
              <!-- <p class="goodstotal">
                直播商品总数：<span
                  v-if="!loading && table_data01.length"
                  v-num_running="{ num: table_data01.length }"
                ></span>
                <span v-if="!table_data01.length && !loading">--</span>
              </p>-->
              <div class="trendzl">
                <my_line1
                  v-if="x_data05"
                  :flow_chartxx="x_data055"
                  yAxisIndex="1"
                  style="height: 250px; width: 428px"
                  :x_data="x_data05"
                  :y1_data="y2_data05"
                  name1="总量"
                  formatter="1"
                  yname="总量"
                  size="12"
                  grid_line="false"
                  line_color="rgba(171,231,255,0.3)"
                  font_color="rgba(235,235,235,0.7)"
                />
                <!-- <my_line1
                  v-if="x_data05 && !Newloading"
                  :flow_chartxx="x_data055"
                  yAxisIndex="1"
                  style="height: 250px; width: 428px"
                  :x_data="x_data05"
                  :y1_data="y1_data05"
                  :y2_data="y2_data05"
                  name1="增量"
                  name2="总量"
                  formatter="1"
                  yname="增量"
                  yname1="总量"
                  size="12"
                  grid_line="false"
                  line_color="rgba(171,231,255,0.3)"
                  font_color="rgba(235,235,235,0.7)"
                />-->
                <div
                  v-loading="Newloading"
                  v-if="Newloading"
                  class="loading"
                  element-loading-text="拼命加载中..."
                  element-loading-spinner="el-icon-loading"
                  :class="{ open_loading: !$store.state.left_nav_flag }"
                ></div>
                <div class="zwsj1 zwsj2" v-if="!Newloading && !x_data05">
                  <img src="@/assets/liu/kby.png" alt />
                  <p>暂无数据</p>
                </div>
              </div>
            </div>
            <div class="public activeName">
              <div class="waRehea1">
                <p style="padding: 0" class="tit">涨粉/粉丝团趋势</p>
                <my_line1
                  v-if="fanstuan_chartx"
                  style="height: 250px; width: 438px; margin-left: -14px"
                  :x_data="fanstuan_chartx"
                  :flow_chartxx="fanstuan_chartxx"
                  :y1_data="fanstuan_charty"
                  :y2_data="fanstuan_charty1"
                  name1="本场涨粉人数"
                  name2="粉丝团新增"
                  formatter="1"
                  yAxisIndex="1"
                  size="12"
                  grid_line="false"
                  font_color="rgba(195,202,223,0.5)"
                />
                <div
                  v-loading="loading"
                  v-if="Newloading"
                  class="loading"
                  element-loading-text="拼命加载中..."
                  element-loading-spinner="el-icon-loading"
                  :class="{ open_loading: !$store.state.left_nav_flag }"
                ></div>
                <div class="zwsj1 zwsj2" v-if="!Newloading && !fanstuan_chartx">
                  <img src="@/assets/liu/kby.png" />
                  <p>暂无数据</p>
                </div>
                <!-- <el-tabs  v-model="activeName">
                  <el-tab-pane :lazy="true" label="涨粉/粉丝团趋势" name="second">
                    <my_line1
                      v-if="fanstuan_chartx"
                      style="height: 236px; width: 438px; margin-left: -4px"
                      :x_data="fanstuan_chartx"
                      :flow_chartxx="fanstuan_chartxx"
                      :y1_data="fanstuan_charty"
                      :y2_data="fanstuan_charty1"
                      name1="本场涨粉人数"
                      name2="粉丝团新增"
                      formatter="1"
                      yAxisIndex="1"
                      size="12"
                      grid_line="false"
                      font_color="rgba(195,202,223,0.5)"
                    />
                    <div class="zwsj1 zwsj2" v-if="!loading && !fanstuan_chartx">
                      <img src="@/assets/liu/kby.png" />
                      <p>暂无数据</p>
                    </div>
                </el-tab-pane>-->
                <!-- <el-tab-pane label="音浪收入"
                              :lazy="true"
                              name="first">
                    <div class="yl"
                        v-if="response02 && response02.sound_count">
                      音浪收入总数 : {{ format_num(response02.sound_count) }}
                    </div>
                    <div class="yl"
                        v-if="response02 && !response02.sound_count">
                      音浪收入总数 : --
                    </div>
                    <my_line1 v-if="x_data01"
                              style="height: 236px; width: 462px; margin-left: -20px"
                              :x_data="x_data01"
                              :y1_data="y1_data01"
                              :y2_data="y2_data01"
                              :flow_chartxx="x_data011"
                              name1="增量"
                              name2="总量"
                              yAxisIndex="1"
                              formatter="1"
                              yname="增量"
                              yname1="总量"
                              size="12"
                              grid_line="false"
                              line_color="rgba(171,231,255,0.5)"
                              font_color="rgba(235,235,235,0.5)" />
                    <div class="zwsj1 zwsj2"
                        v-if="!loading && !x_data01">
                      <img src="@/assets/liu/kby.png" />
                      <p>暂无数据</p>
                    </div>
                  </el-tab-pane> 
                </el-tabs>-->
              </div>
            </div>
          </div>
          <!--  -->
          <div class="centerbox">
            <div class="info">
              <jinbi1
                v-if="
                  response01 && response01.status == 1 && response01.is_shop
                "
                :isRuningAni="isRuningAni"
              />
              <!-- <div class="info_bg">
                <i></i>
                <i></i>
              </div>-->
              <div class="info_box">
                <!-- 按钮 -->
                <div style="height: 154px">
                  <p class="livesales">直播间累计销售额/GMV</p>
                  <!-- <p
                    class="num"
                    v-if="response01"
                    v-num_running="{ num: response01.live_sales }"
                  ></p>-->
                  <!-- <p class="num">996996969</p> -->
                  <div class="numScorll_box">
                    <!-- <div class="purse_icon"></div> -->
                    <div class="numScorll_item" ref="numScorllBox">
                      <div class="numScorll">
                        <template v-for="(item, index) in prosecutorArr">
                          <div
                            class="numItem"
                            :key="index"
                            v-if="isNumberFn(item)"
                          >
                            <span
                              :style="{
                                transform:
                                  'translateY(' + item * 60 * -1 + 'px)',
                              }"
                            >
                              <i v-for="(ic, indexc) in 10" :key="indexc">
                                {{ ic - 1 }}
                              </i>
                            </span>
                          </div>
                          <!-- 这里报错目前先不怎么解决 -->
                          <b v-if="item == ','">,</b>
                          <b v-if="item == '.'">.</b>
                          <b v-if="item == '-'">-</b>
                          <!-- 提交测试 -->
                        </template>
                      </div>
                      <i class="num_unit" ref="numF" v-show="numNnit">{{
                        numNnit
                      }}</i>
                    </div>
                  </div>

                  <!-- <p
                    class="num"
                    v-if="response01 && !response01.live_sales "
                  >
                    --
                  </p>-->
                </div>
                <div class="infobot">
                  <div>
                    <!-- <p
                      class="p1"
                      v-if="response01 && response01.line_count"
                      v-num_running="{ num: response01.line_count }"
                    ></p>-->
                    <p class="p1">
                      <!-- <span v-num_running="{ num: response01.line_count }" v-if="response01"></span> -->
                      <span v-if="response01">{{
                        format_num(response01.line_count)
                      }}</span>
                      <!-- <span v-if="response01 && !response01.line_count">--</span> -->
                    </p>
                    <p class="p2">当前在线人数</p>
                  </div>
                  <div>
                    <!-- <p
                      class="p1"
                      v-if="response01 && response01.view_count"
                      v-num_running="{ num: response01.view_count }"
                    ></p>
                    <p class="p1" v-if="response01 && !response01.view_count">--</p>-->
                    <p class="p1">
                      <!-- <span v-num_running="{ num: response01.view_count }" v-if="response01"></span> -->
                      <span v-if="response01">{{
                        format_num(response01.view_count)
                      }}</span>
                      <!-- <span v-if="response01 && !response01.view_count">--</span> -->
                    </p>
                    <p class="p2">累计观看人次</p>
                  </div>
                  <div>
                    <!-- <p
                      class="p1"
                      v-if="response01&&response01.live_volume"
                      v-num_running="{ num: response01.live_volume }"
                    ></p>
                    <p
                      class="p1"
                      v-if="response01 && !response01.live_volume"
                    >
                      --
                    </p>-->
                    <p class="p1">
                      <!-- <span
                        v-num_running="{ num: response01.live_volume }"
                        v-if="response01 && response01.is_shop != 0"
                      ></span>-->
                      <span v-if="response01 && response01.is_shop != 0">{{
                        format_num(this.goodsSales)
                      }}</span>
                      <span v-if="response01 && response01.is_shop == 0"
                        >--</span
                      >
                    </p>
                    <p class="p2">商品销量</p>
                  </div>
                  <div>
                    <!-- <p
                      class="p1"
                      v-if="response01 && response01.livepro"
                      v-num_running="{ num: format_num(response01.livepro) }"
                    >
                    </p>
                    <p class="p1" v-if="response01 && !response01.livepro">--</p>-->
                    <p class="p1">
                      <span v-if="response01 && response01.is_shop != 0">{{
                        milliFormat(response01.livepro)
                      }}</span>
                      <!-- <span
                        v-num_running="{ num: response01.livepro }"
                        v-if="response01 && response01.is_shop != 0"
                      ></span>-->
                      <span v-if="response01 && response01.is_shop == 0"
                        >--</span
                      >
                    </p>
                    <p class="p2">直播商品数</p>
                  </div>
                  <div>
                    <!-- <p class="p1" v-if="response01 && response01.avglook">
                      {{ response01.avglook }}
                    </p>
                    <p class="p1" v-if="response01 && !response01.avglook">--</p>-->
                    <p class="p1">
                      <span v-if="response01 && response01.is_shop != 0">
                        {{ response01.avglook }}
                      </span>
                      <span v-if="response01 && response01.is_shop == 0"
                        >--</span
                      >
                    </p>
                    <p class="p2">UV价值</p>
                  </div>
                  <div>
                    <!-- <p
                      class="p1"
                      v-if="response01 && response01.avgprice"
                      v-num_running="{ num: response01.avgprice }"
                    ></p>
                    <p class="p1" v-if="response01 && !response01.avgprice">--</p>-->
                    <p class="p1">
                      <span v-if="response01 && response01.is_shop != 0">{{
                        response01.avgprice
                      }}</span>
                      <!-- <span
                        v-num_running="{ num: response01.avgprice }"
                        v-if="response01 && response01.is_shop != 0"
                      ></span>-->
                      <span v-if="response01 && response01.is_shop == 0"
                        >--</span
                      >
                    </p>
                    <p class="p2">客单价</p>
                  </div>
                  <div>
                    <!-- <p class="p1" v-if="response01 && response01.avglooktime">
                      {{ response01.avglooktime }}
                    </p>
                    <p class="p1" v-if="response01 && !response01.avglooktime">
                      --
                    </p>-->
                    <p class="p1">
                      <span v-if="response01">{{
                        response01.avglooktime
                      }}</span>
                      <!-- <span v-if="response01 && !response01.avglooktime">--</span> -->
                    </p>
                    <p class="p2">人均看播时长</p>
                  </div>
                  <div>
                    <!-- <p class="p1" v-if="response01 && response01.livefanRate">
                      {{ response01.livefanRate }}%
                    </p>
                    <p class="p1" v-if="response01 && !response01.livefanRate">
                      --
                    </p>-->
                    <p class="p1">
                      <span v-if="response01">
                        {{ response01.livefanRate + "%" }}
                      </span>
                      <!-- <span v-if="response01 && !response01.livefanRate">--</span> -->
                    </p>
                    <p class="p2">转粉率</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="centerbot">
              <ul class="table">
                <li>商品</li>
                <li>
                  <div
                    @click="clicksort(1, 1)"
                    class="cur"
                    :class="sort01 != 0 ? 'hover' : ''"
                    style="width: 65px; margin: auto"
                  >
                    直播价
                    <img
                      v-show="sort01 == 0"
                      src="@/assets/liu/no_down_up.png"
                      class="sort"
                    />
                    <img
                      v-show="sort01 == 1"
                      src="@/assets/liu/down_up.png"
                      class="sort"
                    />
                    <img
                      src="@/assets/liu/up_down.png"
                      v-show="sort01 == 2"
                      class="sort"
                    />
                  </div>
                </li>
                <li>
                  <div
                    @click="clicksort1(1, 0)"
                    class="cur"
                    :class="sort02 != 0 ? 'hover' : ''"
                    style="width: 68px; margin: auto"
                  >
                    上架时间
                    <img
                      v-show="sort02 == 0"
                      src="@/assets/liu/no_down_up.png"
                      class="sort"
                    />
                    <img
                      v-show="sort02 == 1"
                      src="@/assets/liu/down_up.png"
                      class="sort"
                    />
                    <img
                      src="@/assets/liu/up_down.png"
                      v-show="sort02 == 2"
                      class="sort"
                    />
                  </div>
                </li>
                <li>
                  <div
                    @click="clicksort2(1, 2)"
                    class="cur"
                    :class="sort03 != 0 ? 'hover' : ''"
                    style="width: 100px; margin: auto"
                  >
                    直播销量 (件)
                    <img
                      v-show="sort03 == 0"
                      src="@/assets/liu/no_down_up.png"
                      class="sort"
                    />
                    <img
                      v-show="sort03 == 1"
                      src="@/assets/liu/down_up.png"
                      class="sort"
                    />
                    <img
                      src="@/assets/liu/up_down.png"
                      v-show="sort03 == 2"
                      class="sort"
                    />
                  </div>
                </li>
                <li>
                  <div
                    @click="clicksort3(1, 3)"
                    class="cur"
                    :class="sort04 != 0 ? 'hover' : ''"
                    style="width: 110px; margin: auto"
                  >
                    直播销售额 (元)
                    <img
                      v-show="sort04 == 0"
                      src="@/assets/liu/no_down_up.png"
                      class="sort"
                    />
                    <img
                      v-show="sort04 == 1"
                      src="@/assets/liu/down_up.png"
                      class="sort"
                    />
                    <img
                      src="@/assets/liu/up_down.png"
                      v-show="sort04 == 2"
                      class="sort"
                    />
                  </div>
                </li>
              </ul>
              <ul class="tbody" v-if="table_data01.length">
                <li
                  v-for="(item, index) in table_data01"
                  :key="'table' + index"
                >
                  <div class="td td_01">
                    <div class="goods_img" @click="go_to_page01(item.pro_id)">
                      <img class="logo" v-lazy="item.logo" />
                      <div class="sold_out" v-if="item.prostatus == 1">
                        已下架
                      </div>
                    </div>
                    <div class="ziyou_box" @click="go_to_page01(item.pro_id)">
                      <!-- <SourceIcon :sourceid="item.pro_from" /> -->
                      <div
                        class="goods_iden"
                        v-if="item.proSign == 1"
                      >
                        自有
                      </div>
                      <div class="goods_iden" v-else-if="item.proSign == 2">广场</div>
                      <div class="goods_iden" v-else>自有&广场</div>
                      <!-- <p class="dot hover" @click="go_to_page01(item.pro_id)">{{item.title}}</p> -->
                      {{item.title}}
                    </div>
                  </div>
                  <div class="td td_02 price">
                    <span v-if="item.live_prive == item.max_price"
                      >￥{{ item.live_prive }}</span
                    >
                    <span
                      v-if="
                        item.live_prive != item.max_price && item.max_price != 0
                      "
                      >￥{{ item.live_prive }}-{{ item.max_price }}</span
                    >
                    <span
                      v-if="
                        item.live_prive != item.max_price && item.max_price == 0
                      "
                      >￥{{ item.live_prive }}</span
                    >
                  </div>
                  <div class="td td_02 td_03">
                    <p>{{ timestamp(item.begin_time, "h:m:s") }}</p>
                  </div>
                  <div class="td td_02 td_04">
                    <p>{{ format_num(item.sales_count) }}</p>
                  </div>
                  <div class="td td_05">
                    {{ format_num(item.sales_volume) }}
                  </div>
                </li>
                <li v-show="table_data01.length" id="nothing">
                  <p>我是有底线的～</p>
                </li>
              </ul>
              <div class="empty" v-if="!loading1 && table_data01.length == 0">
                <img src="@/assets/liu/kby.png" />
                <p>暂无数据</p>
              </div>
            </div>
          </div>
          <div class="rightbox">
            <div class="public">
              <div class="Talent">
                <div class="tab tab1">
                  <button
                    :class="swiperNum == 0 ? 'active' : ''"
                    @click="swiperTabBtnFn(0)"
                  >
                    观众来源分布
                  </button>
                  <el-tooltip
                    effect="light"
                    placement="top"
                    popper-class="mytooltip"
                  >
                    <div slot="content">
                      粉丝：粉丝推荐、关注页面
                      <br />同城：同城推荐
                      <br />视频：视频推荐、直播间DOU+视频加热
                      <br />其他：直播广场、直播间DOU+直播加热，feedlive投放、外部链接等
                      <br />
                    </div>
                    <img
                      class="whatImg01"
                      src="@/assets/liu/search_result04.png"
                      alt
                    />
                  </el-tooltip>
                  <button
                    class="button"
                    :class="swiperNum == 1 ? 'active' : ''"
                    @click="swiperTabBtnFn(1)"
                  >
                    观众来源实时分布
                  </button>
                </div>
                <template v-if="pie_data01 && pie_data01.length">
                  <el-carousel
                    class="swiperBox"
                    height="250px"
                    ref="mySwiperRef"
                    :autoplay="true"
                    :indicator-position="'none'"
                    @change="slideEndFn"
                  >
                    <el-carousel-item>
                      <div>
                        <!-- <div class="audience"> -->
                        <live_pie
                          style="
                            height: 233px;
                            width: 452px;
                            margin-left: -20px;
                          "
                          :valueData="pie_data01"
                        />

                        <div
                          class="zwsj1"
                          v-if="!loading && pie_data01.length == 0"
                          style="margin-left: -20px"
                        >
                          <img src="@/assets/liu/kby.png" />
                          <p>暂无数据</p>
                        </div>
                        <!-- </div> -->
                      </div>
                    </el-carousel-item>
                    <el-carousel-item>
                      <div
                        style="height: 236px; width: 452px; margin-left: -20px"
                      >
                        <my_line2
                          style="height: 233px; width: 452px"
                          v-if="x_data6"
                          :x_data="x_data6"
                          :y1_data="y1_data6"
                          :y2_data="y2_data7"
                          :y3_data="y2_data8"
                          :y4_data="y2_data9"
                          :flow_chartxx="x_data66"
                          name1="同城"
                          name2="粉丝"
                          name3="视频"
                          name4="其他"
                          formatter="1"
                          size="12"
                          grid_line="false"
                          line_color="rgba(171,231,255,0.3)"
                          font_color="rgba(235,235,235,0.7)"
                        />
                        <div style="width: 454px" class="zwsj1" v-else>
                          <img src="@/assets/liu/kby.png" alt />
                          <p>暂无数据</p>
                        </div>
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </template>
                <div
                  v-loading="Newloading"
                  v-if="Newloading"
                  class="loading"
                  element-loading-text="拼命加载中..."
                  element-loading-spinner="el-icon-loading"
                  :class="{ open_loading: !$store.state.left_nav_flag }"
                ></div>
              </div>
            </div>

            <!--  -->
            <div class="public">
              <div class="public">
                <p class="tit">观众性别分析</p>
                <div class="audience">
                  <template>
                    <gender v-if="pie_data02.length" :pieData="pie_data02" />
                    <div v-else class="zwsj1">性别分析暂无数据</div>
                    <p class="tit">观众年龄分析</p>
                    <detailsBar
                      class="detailsBar"
                      v-if="age"
                      :starXData="age"
                      :starYData="starYData"
                    />
                  </template>
                  <div
                    v-loading="loading4"
                    v-show="loading4"
                    class="loading"
                    element-loading-text="拼命加载中..."
                    element-loading-spinner="el-icon-loading"
                    :class="{ open_loading: !$store.state.left_nav_flag }"
                  ></div>
                  <p v-if="!nodata && !loading4" class="zwsj">
                    年龄分布暂无数据
                  </p>
                </div>
              </div>
            </div>
            <div class="public">
              <div class="chat">
                <div class="tab">
                  <button
                    :class="active3 == 0 ? 'active' : ''"
                    @click="wave3(0)"
                  >
                    弹幕详情
                  </button>
                  <button
                    :class="active3 == 1 ? 'active' : ''"
                    @click="wave3(1)"
                  >
                    土豪送礼
                  </button>
                </div>
                <div class="bullet" v-if="active3 == 0">
                  <div
                    class="list_box"
                    v-if="barrage_data && barrage_data.length"
                  >
                    <vue-seamless-scroll
                      :data="barrage_data"
                      :class-option="defaultOption"
                    >
                      <ul class="ul01">
                        <li
                          v-for="(item, index) in barrage_data"
                          :key="'barrage_data' + index"
                        >
                          <div class="bul">
                            <p v-if="item.create_time">
                              {{ timestamp(item.create_time, "M-D h:m") }}
                            </p>
                            <p>
                              <img
                                class="logo"
                                :src="item.logo"
                                v-errorImg:talent
                              />
                            </p>
                            <div class="dot1">
                              <span>{{ item.nickname }}</span>
                              <span>:</span>
                              <span>{{ item.message }}</span>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </vue-seamless-scroll>
                  </div>
                  <div
                    v-loading="barrage_data_loading"
                    v-if="barrage_data_loading"
                    class="loading"
                    element-loading-text="拼命加载中..."
                    element-loading-spinner="el-icon-loading"
                    :class="{ open_loading: !$store.state.left_nav_flag }"
                  ></div>
                  <div
                    class="zwsj1"
                    v-if="!barrage_data_loading && !barrage_data.length"
                  >
                    <img src="@/assets/liu/kby.png" />
                    <p>暂无数据</p>
                  </div>
                </div>
                <div class="giving" v-if="active3 == 1">
                  <ul class="ul02" v-if="gift_data.length">
                    <li
                      v-for="(item, index) in gift_data"
                      :key="'barrage_data01' + index"
                    >
                      <span>{{ index + 1 }}</span>
                      <img class="logo" :src="item.logo" />
                      <span class="dot">{{ item.nickname }}</span>
                      <div>
                        <span>{{ format_num(item.sound) }}</span>
                        <span>音浪</span>
                      </div>
                    </li>
                  </ul>
                  <div
                    style="width: 407px"
                    class="zwsj1"
                    v-if="!loading && !gift_data.length"
                  >
                    <img src="@/assets/liu/kby.png" />
                    <p>暂无数据</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
    <div :class="{ livepadd1: i != 0 }" class="video" v-show="showVideo" v-drag>
      <i class="close" @click="colseVideoBox"></i>
      <div id="myVideoBox" class="video_box"></div>
    </div>
  </div>
</template>
<script>
import drag from "./drag";
// import drag from "./drag";
import SourceIcon from "@/component/SourceIcon.vue";
import jinbi1 from "@/component/live_jinbi1.vue";
import logo from "@/component/logoNew.vue";
import word_cloud from "@/component/word_cloud";
import live_map from "@/component/live_map";
import live_pie from "@/component/live_pie";
import gender from "./GenderSpread.vue";
import detailsBar from "./DetailsBar";
import closeImg from "@/assets/liu/close.png";
// 视频
import videojs from "video.js";
import "videojs-contrib-hls";
// import FansPortraitVue from "../../wang/talent/tdetails/component/FansPortrait.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import shopDefaultImg from "@/assets/img/shop.png"; //图片 默认
export default {
  name: "live",
  components: {
    word_cloud,
    live_map,
    live_pie,
    logo,
    SourceIcon,
    gender,
    detailsBar,
    jinbi1,
    vueSeamlessScroll,
  },
  data() {
    return {
      isPageLoading: true,
      hasShow: false,
      isRuningAni: "", //是否运行动画
      numNnit: "", //滚动数字底下单位名称
      //这里的数字数组是个8位数，只是占位，不能直接使用，看需求有可能是10位或11、12、20等等
      prosecutorArr: "",
      //这个参数是后台传给我们的，也不能直接使用，需要转换
      livesalesNums: 0, //
      goodsSales: 0,
      isFristGetGMV: true, //是否是第一次获取顶部接口
      sort01: 0,
      sort02: 0,
      sort03: 1,
      sort04: 0,
      img: closeImg,
      positionX: 0,
      positionY: 0,
      orderType: "1", //1降序 0升序
      sort: 2,
      show: false,
      show1: false,
      activeName: "second",
      active: 0, //tab
      swiperNum: 0, //tab
      active2: 0, //tab
      active3: 0, //tab
      permissions: 1,
      response01: null,
      response02: null,
      x_data01: null,
      y1_data01: null,
      y2_data01: null,
      x_data02: null,
      y1_data02: null,
      y2_data02: null,
      x_data03: null,
      y1_data03: null,
      y2_data03: null,
      x_data04: null,
      y1_data04: null,
      y2_data04: null,
      x_data05: null,
      y1_data05: null,
      y2_data05: null,
      word_data: [],
      barrage_data: [],
      barrage_data_loading: true,
      gift_data: [],
      pie_data01: [],
      pie_data02: [],
      pie_data03: [],
      map_data: [],
      Newloading: true,
      loading: true,
      loading1: true,
      loading2: true,
      loading3: true,
      loading4: true,
      table_data01: [],
      page01: 1,
      loop01: null,
      loop02: null,
      loop03: null,
      loop04: null, //10秒之内请求GMV接口的定时器
      status: null,
      age: null,
      starYData: null,
      table_data011: null,
      table_data012: null,
      showVideo: false,
      videoJS: null, //video.js 对象
      path: null,
      my_video: "",
      i: 0,
      y1_data6: null,
      y2_data7: null,
      y2_data8: null,
      y2_data9: null,
      x_data6: null,
      x_data66: null,
      fanstuan_chartx: null,
      fanstuan_charty: null,
      fanstuan_charty1: null,
      flow_chartx: null,
      y_avglooktime: null,
      y_in: null,
      y_line: null,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
      flow_chartxx: null,
      fanstuan_chartxx: null,
      x_data055: null,
      x_data011: null,
      logo: null,
      nodata: null,
      finishLeft: false,
      Newloading2: false,
      // 轮播图
      swiperOption: {
        //自动轮播
        // pauseOnMouseEnter:true,
        autoplay: {
          delay: 4000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: false,
        },
        //开启循环模式
        loop: false,
      },
      audienceLoading: true, //观众画像loading
    };
  },
  computed: {
    parse_int() {
      return function (parm01) {
        return parseInt(parm01);
      };
    },
    defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.barrage_data.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        openTouch: false,
      };
    },
  },
  created() {
    let timeCout = 0;
    // if (vipLevel == 0) return; //如果是免费版则不请求任何接口
    this.get_data01().then((code) => {
      this.isPageLoading = false;
      if (code == 0) {
        this.get_data();
        this.get_data_table();
        this.get_data02();
        this.get_data03();
        this.get_data04();
        this.move();
        // this.loop04 = setInterval(() => {
        //   //10秒之内每两秒请求一次
        //   if (timeCout < 8) {
        //     this.get_data01();
        //     timeCout += 2;
        //   } else {
        //     clearInterval(this.loop04);
        //   }
        // }, 2000);
        this.loop02 = setInterval(() => {
          this.get_data();
          this.get_data_table();
          this.get_data01();
          this.get_data04();
          this.isRuningAni = this.getStr(16);
        }, 10000);
        this.loop03 = setInterval(() => {
          this.get_data03();
          this.get_data02();
        }, 10000);
      } else if (code == 1003) {
        this.hasShow = true;
      }
      this.$nextTick(() => {
        this.setSize();
      });
    });
  },
  mounted() {
    // that.$refs.live1.style.height = document.body.clientHeight + 'px';
    // that.$refs.live1.style.width = document.body.clientWidth + "px";
  },
  methods: {
    setSize() {
      let ele = document.querySelector(".live1_box");
      if (!ele) return;
      let setWindowSizeFn = function () {
        let s = document.body.clientWidth / 1920;
        ele.style.transformOrigin = "0 top";
        ele.style.transform = "scale(" + s + ")";
      };
      setWindowSizeFn();
      window.onresize = function () {
        setWindowSizeFn();
      };
    },
    swiperTabBtnFn(num) {
      this.$refs.mySwiperRef.setActiveItem(num);
    },
    // 轮播图
    slideEndFn() {
      this.swiperNum = this.$refs.mySwiperRef.activeIndex;
    },

    go_to_page_talent(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`,
      });
      window.open(router.href, "_blank");
    },
    // 跳转直播详情页面
    godetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}`,
      });
      window.open(router.href, "_blank");
    },
    isNumberFn(num) {
      return !isNaN(Number(num));
    },
    PrefixInteger(num, length) {
      //给数字前面补零 比如‘59832’补成8位即位‘00059832’
      return (Array(length).join("0") + num).slice(-length);
    },
    milliFormat(num) {
      //添加千位符
      if (this.response01 && this.response01.is_shop == 0) {
        return "--";
      }
      var res = num.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ",";
        });
      });
      return res;
    },
    plusNPrAll() {
      this.prosecutorArr = this.milliFormat(
        this.livesalesNums ? this.livesalesNums : "0"
      );
    },
    getRandomNumber(min, max) {
      //为了看效果，refreshLeft触发增加数字看效果，和后台数据过来效果一样，不管增加或减少
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    refreshLeft(num) {
      //刷新数据，我这里因为静态看效果，联调时将请求写在里面就好了
      // this.numbers = parseInt(this.numbers)+ this.getRandomNumber(1, 10000)
      this.livesalesNums = parseFloat(num);
      this.plusNPrAll();
      setTimeout(() => {
        this.setNumBoxWidth();
        setTimeout(() => {
          //防止与页面同时刷新造成的卡顿
          this.isRuningAni = this.getStr(16);
        }, 100);
      });
    },
    setNumBoxWidth() {
      //设置滚动数组的宽度，用来定位单位符号
      let box = this.$refs.numScorllBox;
      let numF = this.$refs.numF;
      if (box && numF) {
        numF.style.visibility = "hidden";
        box.removeAttribute("style");
        let width = box.clientWidth + "px";
        box.style.width = width;
        numF.style.visibility = "initial";
      }
      let num = this.livesalesNums;
      let numNnit = "";
      if (num && num >= 10000) {
        if (num < 100000) {
          numNnit = "万";
        } else if (num < 1000000) {
          numNnit = "十万";
        } else if (num < 10000000) {
          numNnit = "百万";
        } else if (num < 100000000) {
          numNnit = "千万";
        } else if (num < 1000000000) {
          numNnit = "亿";
        } else if (num < 10000000000) {
          numNnit = "十亿";
        } else if (num < 100000000000) {
          numNnit = "百亿";
        } else if (num < 1000000000000) {
          numNnit = "千亿";
        }
      } else {
        numNnit = "";
      }
      this.numNnit = numNnit;
    },
    //排序
    clicksort(i, s) {
      this.sort = s;
      this.table_data01 = [];
      this.sort02 = 0;
      this.sort03 = 0;
      this.sort04 = 0;
      if (this.sort01 == 0) {
        this.sort01 = i;
        this.orderType = "1";
      } else if (this.sort01 == 1) {
        this.sort01 = 2;
        this.orderType = "0";
      } else if (this.sort01 == 2) {
        this.sort01 = 1;
        this.orderType = "1";
      }
      this.get_data_table();
    },
    clicksort1(i, s) {
      this.sort = s;
      this.sort01 = 0;
      this.sort03 = 0;
      this.sort04 = 0;
      this.table_data01 = [];
      if (this.sort02 == 0) {
        this.sort02 = i;
        this.orderType = "1";
      } else if (this.sort02 == 1) {
        this.sort02 = 2;
        this.orderType = "0";
      } else if (this.sort02 == 2) {
        this.sort02 = 1;
        this.orderType = "1";
      }
      this.get_data_table();
    },
    clicksort2(i, s) {
      this.sort = s;
      this.sort01 = 0;
      this.sort02 = 0;
      this.sort04 = 0;
      this.table_data01 = [];
      if (this.sort03 == 0) {
        this.sort03 = i;
        this.orderType = "1";
      } else if (this.sort03 == 1) {
        this.orderType = "0";
        this.sort03 = 2;
      } else if (this.sort03 == 2) {
        this.sort03 = 1;
        this.orderType = "1";
      }
      this.get_data_table();
    },
    clicksort3(i, s) {
      this.sort = s;
      this.sort01 = 0;
      this.sort03 = 0;
      this.sort02 = 0;
      this.table_data01 = [];
      if (this.sort04 == 0) {
        this.orderType = "1";
        this.sort04 = i;
      } else if (this.sort04 == 1) {
        this.orderType = "0";
        this.sort04 = 2;
      } else if (this.sort04 == 2) {
        this.orderType = "1";
        this.sort04 = 1;
      }
      this.get_data_table();
    },
    //播放
    playlive() {
      if (this.showVideo) return;
      this.showVideo = true;
      var myVideoBox = document.getElementById("myVideoBox");
      myVideoBox.innerHTML =
        "<video class='video-js vjs-default-skin vjs-big-play-centered' preload='auto' id='my-video' style='width:320px; height: 100%'><source src=" +
        this.path +
        " type='application/x-mpegURL' /></video>";
      if (!this.videoJS) {
        this.videoJS = videojs(
          "my-video",
          {
            autoplay: true,
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true,
            preload: "auto",
            language: "zh-CN",
            notSupportedMessage: "此直播暂无法播放，请稍后再试",
          },
          function () {
            // this.play();
          }
        );
      } else {
        // console.log(this.videoJS.play());
        this.videoJS.play();
      }
      // this.getVideo();
      // let video = document.querySelector("video");
      // video.play();
    },

    // 关闭
    colseVideoBox() {
      this.videoJS.pause();
      this.videoJS.dispose(); //每次关闭都销毁videojs实例
      this.videoJS = null;
      this.showVideo = false;
    },
    // getVideo() {
    //   if (document.getElementById("#my-video")) {
    //     videojs(
    //       "my-video",
    //       {
    //         autoplay: true,
    //         bigPlayButton: false,
    //         textTrackDisplay: false,
    //         posterImage: true,
    //         errorDisplay: false,
    //         controlBar: true
    //       },
    //       function() {
    //         if (!this.play) {
    //         } else {
    //           this.play();
    //         }
    //       }
    //     );
    //   }
    // },

    mousemove() {
      this.show = true;
    },
    mouseout() {
      this.show = false;
    },
    mousemove1() {
      this.show1 = true;
    },
    mouseout1() {
      this.show1 = false;
    },
    wave1(i) {
      this.active2 = i;
    },
    wave3(i) {
      this.active3 = i;
    },
    //直播开始结束
    get_data01() {
      return new Promise((resolve, reject) => {
        this.Newloading2 = true;
        this.loading = true;
        // this.response01 = null;
        let that = this;
        this.$axios({
          method: "get",
          url: "/api/live/GetLive",
          params: {
            // room_id: 6905871928632806159,
            room_id: that.$route.params.id,
          },
        })
          .then((response) => {
            if (response.data.code == 0) {
              this.loading = false;
              this.Newloading2 = true;
              this.response01 = response.data.data;
              this.logo = this.response01.logo;
              this.path = this.response01.room_url;
              this.pie_data01 = response.data.data.fans_from;
              if (this.response01.status == 2) {
                clearInterval(this.loop01);
                clearInterval(this.loop02);
                clearInterval(this.loop03);
                clearInterval(this.loop04);
              }

              if (this.isFristGetGMV) {
                
                let str =  ''+this.response01.live_sales;
                let newStr = '';
                for (let i = 0; i < str.length; i++){
                  if(!isNaN(str[i])){
                    newStr+='0'
                  }else{
                    newStr+='.'
                  }
                }
                this.prosecutorArr = this.milliFormat(newStr);
                //如果是第一遍请求接口，不管返回任何值都可以，第二次开始判断如果没有值则不赋值
                setTimeout(() => {
                  this.refreshLeft(this.response01.live_sales); //设置顶部滚动数值
                }, 0);
              
                this.isFristGetGMV = false;
              } else {
                if (this.response01.live_sales) {
                  //如果顶部接口返回了GMV的值，则用顶部接口的值
                  this.refreshLeft(this.response01.live_sales); //设置顶部滚动数值
                }
              }
              if (this.response01.live_volume) {
                //优先取顶部接口的商品销量
                this.goodsSales = this.response01.live_volume;
              }
            }
            if (this.response01) {
              document.title =
                this.response01.nickname + "-数据实时监测大屏-掌上精选";
            }
            resolve(response.data.code);
          })
          .catch((error) => {
            reject(error);
            console.log(error);
          });
      });
    },
    //
    get_data02() {
      this.loading = true;
      this.response02 = null;
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/live/GetLiveAttribute",
        params: {
          // room_id: "6960521564123122463",
          // room_id: "6954846970062080808",
          room_id: that.$route.params.id,
        },
      })
        .then((response) => {
          this.Newloading = false;
          if (response.data.code == 1003) {
            this.permissions = 0;
          }
          if (response.data.code == 0) {
            this.response02 = response.data.data;
            if (this.response02.avglooktime == '0+"') {
              this.response02.avglooktime = false;
            }
            if (response.data.data.sound_chart) {
              this.x_data011 = response.data.data.sound_chart.x;
              this.x_data01 = response.data.data.sound_chart.x.map(
                (element) => {
                  return this.timestamp(element, "h:m");
                }
              );
              this.y1_data01 = response.data.data.sound_chart.y2;
              this.y2_data01 = response.data.data.sound_chart.y1;
            }
            if (response.data.data.line_chart) {
              this.x_data02 = response.data.data.line_chart.x.map((element) => {
                return this.timestamp(element, "h:m");
              });
              this.y1_data02 = response.data.data.line_chart.y2;
              this.y2_data02 = response.data.data.line_chart.y1;
            }
            if (response.data.data.sound_people_chart) {
              this.x_data03 = response.data.data.sound_people_chart.x.map(
                (element) => {
                  return this.timestamp(element, "h:m");
                }
              );
              this.y1_data03 = response.data.data.sound_people_chart.y2;
              this.y2_data03 = response.data.data.sound_people_chart.y1;
            }
            if (response.data.data.fans_chart) {
              this.x_data04 = response.data.data.fans_chart.x.map((element) => {
                return this.timestamp(element, "h:m");
              });
              this.y1_data04 = response.data.data.fans_chart.y2;
              this.y2_data04 = response.data.data.fans_chart.y1;
            }
            if (response.data.data.sales_chart) {
              this.x_data055 = response.data.data.sales_chart.x;

              this.x_data05 = response.data.data.sales_chart.x.map(
                (element) => {
                  return this.timestamp(element, "h:m");
                }
              );
              this.y1_data05 = response.data.data.sales_chart.y2;
              this.y2_data05 = response.data.data.sales_chart.y1;
            }
            if (response.data.data.froms_chart) {
              this.x_data66 = response.data.data.froms_chart.x;
              this.x_data6 = response.data.data.froms_chart.x.map((ele) => {
                return this.timestamp(ele, "h:m");
              });
              this.y1_data6 = response.data.data.froms_chart.y_city;
              this.y2_data7 = response.data.data.froms_chart.y_fans;
              this.y2_data8 = response.data.data.froms_chart.y_video;
              this.y2_data9 = response.data.data.froms_chart.y_other;
            }
            if (response.data.data.fanstuan_chart) {
              this.fanstuan_chartxx = response.data.data.fanstuan_chart.x;

              this.fanstuan_chartx = response.data.data.fanstuan_chart.x.map(
                (ele) => {
                  return this.timestamp(ele, "h:m");
                }
              );
              this.fanstuan_charty = response.data.data.fanstuan_chart.y_fans;
              this.fanstuan_charty1 =
                response.data.data.fanstuan_chart.y_fanstuan;
            }
            if (response.data.data.flow_chart) {
              this.flow_chartxx = response.data.data.flow_chart.x;

              this.flow_chartx = response.data.data.flow_chart.x.map((ele) => {
                return this.timestamp(ele, "h:m");
              });

              if (!this.flow_chartx.length) {
                this.flow_chartx = false;
              }
              this.y_avglooktime = response.data.data.flow_chart.y_avglooktime;

              this.y_in = response.data.data.flow_chart.y_in;
              this.y_line = response.data.data.flow_chart.y_line;
            }
            // this.loading = false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 商品列表
    get_data_table() {
      this.table_data011 = null;
      this.table_data012 = null;
      let that = this;
      this.loading1 = true;
      this.$axios({
        method: "get",
        url: "/api/live/GetLivePro1",
        params: {
          room_id: that.$route.params.id,
          // room_id: "6958578805631896332",
          c: this.orderType,
          s: this.sort,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            response.data.data.data.forEach((item) => {
              item.logo = {
                src: item.logo,
                error: shopDefaultImg,
              };
            });
            // response.data.data.logo = {
            //   src:response.data.data.logo,
            //   error:closeImg
            // }
            this.table_data01 = response.data.data.data;
            this.table_data011 = response.data.data.livesales;

            if (!this.livesalesNums) {
              //如果顶部GMV返回为0，则取商品接口的
              this.refreshLeft(this.table_data011); //设置顶部滚动数值
            }

            this.table_data012 = response.data.data.livevolume;
            if (!this.goodsSales) {
              //商品销量，如果为0则取商品列表接口的
              this.goodsSales = this.table_data012;
            }
          }
          this.loading1 = false;
        })
        .catch((error) => {
          // this.loading = false;
          console.log(error);
        });
      this.loading = false;
    },
    // 达人性别
    get_data04() {
      // this.loading4 = true;
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/live/GetLiveReword",
        params: {
          room_id: that.$route.params.id,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.gift_data = response.data.data.fans;
            this.pie_data02 = response.data.data.fans_attrbute.gender;
            this.pie_data03 = response.data.data.fans_attrbute.age;

            this.age = this.pie_data03.map((item) => {
              return item.name;
            });

            this.starYData = this.pie_data03.map((item) => {
              return item.value;
            });
            this.nodata = this.starYData.some((item) => {
              return item != 0;
            });
            this.map_data = response.data.data.fans_attrbute.province;
          }
          this.loading4 = false;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    get_data() {
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/live/LiveSpeedUp",
        params: {
          roomid: that.$route.params.id,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    get_data03() {
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/live/GetLiveLayerWord",
        params: {
          room_id: that.$route.params.id,
        },
      })
        .then((response) => {
          this.barrage_data_loading = false;
          if (response.data.code == 0) {
            if (response.data.data.hot_word.length) {
              this.word_data = response.data.data.hot_word;
            }

            if (response.data.data.fans_word.length) {
              if (response.data.data.fans_word.length < 7) {
                this.defaultOption.step = 0;
              }

              if (response.data.data.fans_word.length > 50) {
                this.barrage_data = response.data.data.fans_word.slice(0, 50);
              } else {
                this.barrage_data = response.data.data.fans_word;
              }
            } else {
              this.defaultOption.step = 0;
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    move() {
      // this.loop01 = setInterval(() => {
      //   if (this.barrage_data.length) {
      //     this.barrage_data.push(this.barrage_data.shift());
      //   }
      // }, 3000);
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
  },
  beforeDestroy() {
    clearInterval(this.loop01);
    this.loop01 = null;
    clearInterval(this.loop02);
    this.loop02 = null;
    clearInterval(this.loop03);
    this.loop03 = null;
    clearInterval(this.loop04);
    this.loop04 = null;
    if(this.videoJS){
      this.videoJS.pause();
      this.videoJS.dispose(); //切换页面，都销毁videojs实例
      this.videoJS = null;
    }
    this.showVideo = false;
  },
};
</script>

<style scoped lang="less">
.detailsBar {
  transform: translateY(-30px);
}
.numScorll_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.purse_icon {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 5px;
  z-index: 10;
  background-image: url("../../../assets/meng/qiandai.svg");
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform linear 20ms;
  &.ani {
    transform: scale(0.9);
  }
}
.numScorll_item {
  position: relative;
  display: inline-block;
  .num_unit {
    position: absolute;
    left: -3px;
    bottom: -20px;
    display: inline-block;
    width: 42px;
    line-height: 22px;
    font-size: 12px;
    font-style: normal;
    text-align: center;
    color: #fff;
    background-color: #4694e6;
    border-radius: 10px;
    visibility: hidden;
    &:before {
      position: absolute;
      top: -7px;
      left: 50%;
      transform: translateX(-50%);
      content: "";
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #4694e6;
    }
  }
}
.numScorll {
  height: 66px;
  overflow: hidden;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
  .numItem {
    display: inline-block;
    height: 60px;
    overflow: hidden;
    margin: 0 1px;
    span {
      display: inline-block;
      position: relative;
      transition: all 2000ms ease-in-out;
      vertical-align: middle;
      font-size: 0;
    }
    i {
      display: block;
      height: 60px;
      line-height: 60px;
      font-size: 60px;
      font-style: normal;
      color: #fff;
      font-weight: normal;
      font-stretch: normal;
      font-family: DINAlternate-Bold;
    }
  }
  b {
    display: inline-block;
    height: 60px;
    margin: 0 1px;
    line-height: 60px;
    font-style: normal;
    font-size: 60px;
    color: #fff;
    font-family: DINAlternate-Bold;
    // vertical-align: middle;
  }
}
#live1 {
  // margin: 0 auto;
  // width: 1920px;
  // overflow: hidden;
  background: #14192a;
  min-height: 100vh;
  width: 100%;
  position: relative;
  .live1_box {
    // position: absolute;
    width: 100%;
    // top: 50%;
    // transform: translateY(-50%);
    // left: 0;
    padding: 15px 40px;
    box-sizing: border-box;
    background: #14192a;
  }
  .cur {
    cursor: pointer;
  }
  .header_bg {
    width: 1px;
    height: 1px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(620px, 50px);
    background-color: transparent;
    box-shadow: 0 0 350px 100px #e67d97;
    img {
      width: 100%;
    }
  }
  .livepadd1 {
    padding-bottom: 12px;
  }
  .qr {
    position: absolute;
    top: 20px;
    left: -84px;
    width: 168px !important;
    height: 168px !important;
    background: none !important;
    z-index: 10;
    border-radius: 20px !important;
    img {
      &:nth-child(1) {
        width: 188px !important;
        height: 198px !important;
      }
      &:nth-child(2) {
        position: absolute;
        top: 38px;
        left: 38px;
        width: 113px !important;
        height: 111px !important;
      }
    }
    > p {
      position: absolute;
      bottom: -20px !important;
      left: 46px !important;
      width: 114px !important;
      height: 14px;
      font-family: PingFangSC-Regular;
      background: none !important;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 30px;
      letter-spacing: 0px;
      color: #888888 !important;
    }
  }
  .video {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 350px;
    padding: 12px 15px;
    height: 590px;
    z-index: 100;
    background-color: #ffffff;
    box-shadow: 0px 0px 18px 2px rgba(0, 0, 0, 0.1);
    border-radius: 20px !important;
    box-sizing: border-box;
    .video_box {
      height: 100%;
    }
    .close {
      position: absolute;
      right: -15px;
      top: -5px;
      width: 30px;
      height: 30px;
      background-color: #ffffff;
      z-index: 10;
      border-radius: 50%;
      cursor: pointer;
      background: url("../../../assets/liu/close.png") no-repeat;
      background-size: 100% 100%;
    }
    video {
      // position: absolute;
      // top: 1px;
      border-radius: 20px !important;
      width: 320px !important;
      height: 560px !important;
      margin-left: 15px;
      margin-top: 15px;
      // margin-top: 15px;
      // overflow:hidden;
    }
  }
  .permissions_img_1 {
    position: relative;
    width: 100%;
    > p:nth-child(1) {
      margin: 30px auto;
      width: fit-content;
      padding: 11px 21px 12px 21px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 23px;
      border: solid 1px #e9792f;
      text-align: center;
      font-size: 16px;
      color: #fff;
      text-align: center;
      > span {
        font-size: 16px;
        color: #e9792f !important;
        cursor: pointer;
      }
    }
    > img:nth-child(3) {
      width: 180px;
      position: absolute;
      top: 71%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9;
    }
    > img:nth-child(2) {
      width: 100%;
    }
  }

  .activeName {
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 20px;
  }
  .waRehea1 {
    height: 32px !important;
    // width: 260px!important;
    // background-color: rgba(107,134,220,.3);
    border-radius: 6px;
    padding-right: 0 !important;
  }
  .yl {
    position: absolute;
    right: 0;
    top: -41px;
    z-index: 100;
    line-height: 32px;
    font-size: 14px;
    color: #c3cadf;
  }
  .ds {
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    position: absolute;
    top: -41px;
    right: 0;
  }
  header {
    width: 1840px;
    height: 79px;
    position: relative;
    .header {
      display: flex;
      height: 79px;
      .headerleft {
        width: 455px;
        margin-right: 40px;
        .zsjxlogo {
          width: 99px;
          height: 37px;
          margin-top: 12px;
          cursor: pointer;
        }
      }

      .jslogo {
        border: none !important;
      }
      .heacenter {
        position: relative;
        display: flex;
        .logo {
          width: 57px;
          height: 57px;
          border: 2px solid #ff295d;
          overflow: hidden;
          border-radius: 50%;
          box-sizing: border-box;
          img {
            cursor: pointer;
            width: 100%;
            height: 100%;
          }
        }
        .cenrig {
          width: 540px;
          > div {
            height: 29px;
            display: flex;
            margin-left: 15px;
          }
          .livegif {
            width: 64px;
            height: 22px;
            box-sizing: border-box;
            line-height: 22px;
            display: flex;
            position: relative;
            margin-top: 8px;

            background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
              linear-gradient(#ffffff, #ffffff);
            background-blend-mode: normal, normal;
            border-radius: 4px;
            p {
              &:nth-child(1) {
                position: absolute;
                top: 10px;
                left: 5px;
              }
              &:nth-child(2) {
                font-size: 12px;
                font-weight: normal;
                color: #ffffff;
                margin-left: 23px;
              }
            }
          }
          .title {
            font-size: 20px;
            max-width: 137px;
            margin-top: 3px;
            margin-left: 5px;
            height: 20px;
            line-height: 30px;
            height: 28px;
            letter-spacing: 1px;
            color: #ffffff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 5px;
            cursor: pointer;
          }
          .shop {
            width: 19px;
            height: 16px;
            margin-top: 13px;
          }
        }
        .name {
          // width: 162px;
          // height: 13px;
          font-size: 14px;
          line-height: 30px;
          color: #ffffff;
          opacity: 0.7;
        }
        .namedetails:hover {
          color: #fd7f2c;
          cursor: pointer;
        }
      }
      .time {
        // margin-left: 307px;
        // width: 238px;
        padding-left: 12px;
        padding-top: 8px;
        span {
          font-size: 14px;
          line-height: 26px;
          color: #c3cadf;
        }
      }
      // 直播视频按钮
      .plco {
        display: flex;
        position: absolute;
        right: -194px;
        top: 10px;
        z-index: 100;
        > div {
          .one {
            display: inline-block;
            width: 38px;
            height: 38px;
            background: url("../../../assets/liu/liveerweima.png") no-repeat
                center center,
              rgba(39, 49, 81, 0.6);
            background-size: 18px 18px;
            border-radius: 4px;
          }
          .one:hover {
            background: url("../../../assets/liu/liveerweima-h.png") no-repeat
                center center,
              rgba(39, 49, 81, 0.6);
            background-size: 18px 18px;
          }
          &:nth-child(2) {
            margin-right: 15px;
            width: 38px;
            height: 60px;
          }
          &:nth-child(1) {
            cursor: pointer;
            width: 38px;
            height: 38px;
            background-color: rgba(25, 31, 51, 0.3);
            border-radius: 50%;
            img {
              width: 20px;
              height: 20px;
              margin-left: 9px;
            }
          }
          > div {
            cursor: pointer;
            width: 38px;
            height: 38px;
            background-color: rgba(25, 31, 51, 0.3);
            border-radius: 50%;
            p {
              cursor: pointer;
              position: absolute;
              bottom: 26px;
              left: -20px;
              width: 80px;
              height: 42px;
              // background-color: rgba(25, 31, 51, 0.3);
              background: url("../../../assets/liu/livebg.png");
              border-radius: 6px;
              font-size: 14px;
              line-height: 38px;
              text-align: center;
              letter-spacing: 0px;
              color: #ffffff;
            }
            img {
              margin-left: 9px;
              margin-right: 8px;
            }
          }
          .liveerweima {
            width: 106px;
            height: 38px;
            line-height: 38px;
            color: #c3cadf;
            margin-left: 12px;
            border-radius: 4px;
            font-size: 13px;
            padding-left: 36px;
            box-sizing: border-box;
            background: url("../../../assets/liu/click.png") no-repeat,
              rgba(39, 49, 81, 0.6);
            background-size: 15px 18px;
            background-position: 12px 10px;
          }
          .liveerweima:hover {
            background: url("../../../assets/liu/click-h.png") no-repeat,
              rgba(39, 49, 81, 0.6);
            background-size: 15px 18px;
            background-position: 12px 10px;
          }
        }
      }
    }
    .liveend {
      width: 64px;
      height: 22px;
      text-align: center;
      line-height: 22px;
      background-color: rgba(73, 91, 149e, 0.5);
      border-radius: 4px;
      margin-top: 8px;
      font-size: 12px;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
      opacity: 0.8;
      img {
        width: 13px;
        height: 12px;
        margin-left: 6px;
        margin-top: -5px;
        margin-right: 1px;
      }
    }
  }
  main {
    //     ::-webkit-scrollbar {
    //   /* 血槽宽度 */
    //   width: 10px;
    //   height: 8px;
    //   border-radius: 16px !important;
    //   -webkit-border-radius: 10px !important;
    // }

    ::-webkit-scrollbar-thumb {
      /* 拖动条 */
      width: 3px !important;
      background-color: #fff !important;
      border-radius: 10px !important;
      -webkit-border-radius: 10px !important;
      border-radius: 10px;
      /*滚动条的圆角*/
      // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: #c1c1c1;
      /*滚动条的背景颜色*/
    }
    ::-webkit-scrollbar-track {
      -webkit-border-radius: 10px !important;
      border-radius: 10px !important;
    }
    ::-webkit-scrollbar-corner {
      border-radius: 10px !important;
    }

    ::-webkit-scrollbar-track-piece {
      /* 背景槽 */
      background-color: #232b47;
    }
    #nothing {
      text-align: center;
      border-bottom: 0 !important;
      p {
        font-weight: 400;
        font-stretch: normal;
        letter-spacing: 0;
        line-height: 74px;
        color: #bfbfbf;
        margin: auto;
        font-size: 14px !important;
      }
    }
    height: 90%;
    display: flex;
    .leftbox {
      .Traffic {
      }
      .tit {
        font-size: 16px;
        color: #c3cadf;
        box-sizing: border-box;
        padding-left: 25px;
        padding-top: 15px;
      }
      .trend {
        display: flex;
        position: relative;
        justify-content: space-between;
        .goodstotal {
          padding-right: 20px;
          padding-top: 18px;
          font-size: 14px;
          letter-spacing: 0px;
          color: #c3cadf;
        }
        .trendzl {
          width: 420px;
          position: absolute;
          left: 15px;
          top: 45px;
          display: block;
        }
      }
    }
    .public {
      box-sizing: border-box;
      width: 454px;
      height: 294px;
      background-color: rgba(73, 91, 149, 0.3);
      border-radius: 20px;
      // opacity: 0.3;
      margin-bottom: 17px;
      position: relative;
      overflow: hidden;
    }
    .centerbox {
      margin-left: 20px;
      margin-right: 20px;
      .info {
        position: relative;
        width: 890px;
        height: 400px;
        background: url("../../../assets/li/bgbg123.jpg") no-repeat 0 0;
        // background: linear-gradient(140deg, #3fb6f3, #5b70f6);
        border-radius: 20px;
        // overflow: hidden;
        .info_box {
          position: relative;
        }
        // .info_bg {
        //   position: absolute;
        //   width: 100%;
        //   height: 100%;
        //   left: 0;
        //   top: 0;
        //   i {
        //     position: absolute;
        //     display: block;
        //     background-color: rgba(255, 255, 255, 0.1);
        //     transform-origin: center center;
        //     // box-shadow: 0 0 20px 1px rgba(255,255,255,.2);
        //     &:nth-child(1) {
        //       right: 0;
        //       top: -90px;
        //       width: 180px;
        //       height: 180px;
        //       border-radius: 180px;
        //       background: linear-gradient(
        //         107deg,
        //         rgba(255, 255, 255, 0) 30%,
        //         rgba(255, 255, 255, 0.1)
        //       );
        //       animation: iAni linear 15000ms infinite;
        //     }
        //     &:nth-child(2) {
        //       right: -300px;
        //       top: -200px;
        //       width: 400px;
        //       height: 400px;
        //       border-radius: 400px;
        //       background: linear-gradient(
        //         127deg,
        //         rgba(255, 255, 255, 0) 5%,
        //         rgba(255, 255, 255, 0.1)
        //       );
        //       // animation: iAni linear 15000ms infinite;
        //     }
        //     @keyframes iAni {
        //       0% {
        //         transform: scale(0);
        //         opacity: 1;
        //       }
        //       40% {
        //         transform: scale(1.1);
        //         opacity: 1;
        //       }
        //       80% {
        //         opacity: 1;
        //       }
        //       90% {
        //         transform: scale(1.1);
        //       }
        //       100% {
        //         transform: scale(1.1);
        //         opacity: 0;
        //       }
        //     }
        //     @keyframes iAni1 {
        //       0% {
        //         transform: rotate(0);
        //       }
        //       50% {
        //         transform: rotate(360deg);
        //       }
        //       100% {
        //         transform: rotate(0);
        //       }
        //     }
        //   }
        // }
        .livesales {
          width: 100%;
          // height: 16px;
          text-align: center;
          margin: auto;
          font-size: 16px;
          letter-spacing: 0px;
          color: #ffffff;
          padding-top: 45px;
          padding-bottom: 10px;
          opacity: 0.6;
        }
        .num {
          width: 100%;
          height: 60px;
          font-family: DINAlternate-Bold;
          font-size: 60px;
          font-weight: normal;
          font-stretch: normal;
          text-align: center;
          letter-spacing: 2px;
          color: #ffffff;
        }
        .infobot {
          padding-left: 30px;
          padding-right: 30px;
          display: flex;
          flex-wrap: wrap;
          padding-top: 45px;

          > div {
            &:nth-child(1) {
              margin-bottom: 50px;
            }
            &:nth-child(4) {
              background-image: none !important;
            }
            &:nth-child(8) {
              background-image: none !important;
            }
            width: 25%;
            height: 60px;
            color: #fff;
            text-align: center;
            background-image: url(../../../assets/liu/rightbor.png);
            background-repeat: no-repeat;
            background-position: center right;
            background-size: 1px, 60px;

            .p1 {
              font-family: DINAlternate-Bold;
              font-size: 30px;
              // line-height: 19px;
              margin-bottom: 12px;
              letter-spacing: 1px;
              color: #ffffff;
              height: 23px;
            }
            .p2 {
              height: 16px;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 30px;
              letter-spacing: 0px;
              color: #ffffff;
              opacity: 0.6;
            }
          }
        }
      }
      .centerbot {
        margin-top: 12px;
        .table {
          display: flex;
          background-color: rgba(73, 91, 149, 0.3) !important;
          border-radius: 4px;
          width: 890px;
          overflow: hidden;
          li {
            .hover {
              color: #ee843f !important;
            }
            color: #c3cadf;
            > div {
              > img {
                width: 4px;
                height: 10px;
                margin-right: 2px;
                margin-top: -2px;
              }
            }

            &:nth-child(1) {
              width: 320px;
              text-align: left;
              text-indent: 30px;
            }
            &:nth-child(2) {
              width: 117px;
            }
            &:nth-child(3) {
              width: 141px;
            }
            &:nth-child(4) {
              width: 141px;
            }
            &:nth-child(5) {
              width: 131px;
              padding-left: 13px;
            }
            height: 42px;
            text-align: center;
            line-height: 42px;
            // background-color: rgba(73, 91, 149, 0.3) !important;
            // color: #fff;
            font-size: 14px;
            &:first-child {
              th {
                &:first-child {
                  text-align: left;
                  text-indent: 30px;
                  border-top-left-radius: 4px;
                  border-bottom-left-radius: 4px;
                }
                &:last-child {
                  border-top-right-radius: 4px;
                  border-bottom-right-radius: 4px;
                }
              }
            }
          }
        }
        .tbody {
          width: 890px;
          height: 465px;
          overflow-y: scroll;
          overflow-x: hidden;

          li {
            .hover:hover {
              color: #ee843f !important;
            }
            &:hover {
              background: #1e253d;
            }
            display: flex;
            width: 890px;
            border-bottom: 1px solid rgba(229, 229, 229, 0.2) !important;
            padding-top: 15px;
            padding-bottom: 15px;
            height: 80px;
            box-sizing: border-box;
            .price {
              font-size: 16px;
              letter-spacing: 0px;
              color: #c3cadf !important;
              position: relative;
              top: -2px;
              // span{
              //   margin-top: -10px  !important;
              // }
            }
            .goods_img {
              position: relative;
              cursor: pointer;
              margin-left: 20px;
              width: 50px;
              height: 50px;
              background-color: rgba(73, 91, 149, 0.3);
              border-radius: 6px;
              margin-right: 10px;
              overflow: hidden;
              vertical-align: top;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
              .sold_out {
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.6);
                font-size: 14px;
                color: #fff;
                text-align: center;
              }
            }
            .td_01 {
              width: 320px;
              display: flex;
              > div {
                position: relative;

                #SourceIcon {
                  display: inline-block;
                  width: 18px;
                  position: relative;
                  height: 18px;
                  top: 2px;
                }
                .dot {
                  // position: absolute;
                  top: 0;
                  cursor: pointer;
                  display: inline-block;
                  width: 230px;
                  font-size: 14px;
                  font-weight: 500;
                  line-height: 22px;
                  color: #c3cadf;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  white-space: normal;
                  // text-indent: 3em;
                }
                display: inline-block;
              }
              .ziyou_box{
                top: 0;
                cursor: pointer;
                display: inline-block;
                width: 230px;
                font-size: 14px;
                font-weight: 500;
                line-height: 22px;
                color: #c3cadf;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                white-space: normal;
              }
              .goods_iden {
                text-align: center;
                display: inline-block;
                padding: 2px 4px;
                border-radius: 4px;
                border: solid 1px #fd7f2c;
                font-size: 12px;
                font-weight: normal;
                color: #fd7f2c;
              }
            }
            .td_02 {
              text-align: center;
              font-family: DINAlternate-Bold;
              font-size: 15px;
              color: #c3cadf;
              margin-top: 16px;
              width: 117px;
            }
            .td_03 {
              width: 141px;
            }
            .td_04 {
              width: 141px;
            }
            .td_05 {
              font-family: DINAlternate-Bold;
              text-align: center;
              padding-left: 13px;
              width: 131px;
              margin-top: 16px;
              font-size: 15px;
              color: #c3cadf;
            }
          }
        }
      }
    }
    .rightbox {
      .audience {
        margin-top: 15px;
        #live_pie {
          width: 380px;
          height: 233px;
          margin: auto;
        }
      }
      .tit {
        font-size: 16px;
        color: #c3cadf;
        box-sizing: border-box;
        padding-left: 25px;
        padding-top: 15px;
      }

      .Talent {
        // display: flex;
        // justify-content: space-between;
        box-sizing: border-box;
        padding-top: 15px;
        padding-left: 20px;
        position: relative;
        // div {
        //   &:nth-child(1) {
        //     width: 450px;
        //     line-height: 32px;
        //     font-size: 14px;
        //     letter-spacing: 0px;
        //     color: #ffffff;
        //     padding-right: 20px;
        //   }
        //   &:nth-child(2) {
        //     position: absolute;
        //     top: 60px;

        //     height: 233px;
        //     width: 400px;
        //     margin: auto;
        //     #live_pie {
        //       width: 100%;
        //       height: 100%;
        //     }
        //   }
        // }

        .tab {
          position: relative;
          height: 32px !important;
          width: 270px !important;
          // box-sizing: border-box;
          background-color: rgba(107, 134, 220, 0.3);
          border-radius: 6px;

          padding-right: 0px !important;
          line-height: 30px;
          button {
            color: #c3cadf;
            height: 32px;
            line-height: 30px;
            background: transparent;
            border-radius: 6px;
            font-size: 14px;
            &:nth-child(1) {
              width: 130px;
              padding-right: 22px;
            }
          }
          .button {
            // position: absolute;
            // right: 0;
            width: 135px;
          }
          .active {
            background-color: #1779ff;
            border-radius: 6px;
            color: #fff;
          }
        }
        .wid135 {
          width: 135px !important;
        }
      }
      .chat {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding-top: 15px;
        padding-left: 20px;
        // > div {
        //   width: 83px;
        //   height: 32px;
        //   line-height: 30px;
        //   font-size: 14px;
        //   letter-spacing: 0px;
        //   color: #ffffff;
        //   padding-right: 20px;
        // }
        .tab {
          height: 32px !important;
          width: 182px !important;
          // box-sizing: border-box;
          background-color: rgba(107, 134, 220, 0.3);
          border-radius: 6px;
          padding-right: 0px !important;

          button {
            width: 88px;
            height: 32px;
            background: transparent;
            border-radius: 6px;
            // opacity: 0.3;
            font-size: 14px;
            line-height: 30px;
            color: #ffffff;
            text-align: center;
          }
          .active {
            background-color: #1779ff;
            border-radius: 6px;
          }
        }
      }
      .bullet {
        position: absolute;
        left: 0;
        top: 53px;
        width: 454px;
        height: 238px;
        overflow: hidden;
        .list_box {
          width: 415px;
          height: 240px;
          overflow: hidden;
          margin: auto;
          position: relative;
          z-index: 12;
        }
        .ul01 {
          // margin-top: 5px;
          > li {
            .bul {
              height: 40px;
              line-height: 40px;
              > div {
                span {
                  display: inline-block;
                  &:nth-child(1) {
                    max-width: 92px;
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #c3cadf;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  &:nth-child(2) {
                    max-width: 120px;
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    color: #c3cadf;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  &:nth-child(3) {
                    max-width: 150px;
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    color: #c3cadf;
                    opacity: 0.7;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }
              display: flex;
              // width: 454px !important;
              p {
                &:nth-child(1) {
                  color: #c3cadf;
                  font-size: 14px;
                }
              }
              .logo {
                width: 26px;
                height: 26px;
                background-color: #fd7f2c;
                // border: solid 2px rgba(255, 255, 255, 0.7);
                border-radius: 50%;
                margin-left: 25px;
                margin-right: 10px;
              }
            }
          }
        }
      }
      .giving {
        position: absolute;
        top: 53px;
        left: 21px;
        width: 415px;
        margin: auto;
        .ul02 {
          width: 425px;
          height: 220px;
          overflow: scroll;
          overflow-x: auto;
          padding-top: 10px;
          position: relative;
          ::-webkit-scrollbar-track {
            background: red !important; //背景颜色
          }
          ::-webkit-scrollbar-thumb {
            background: #419be3; //滚动条颜色
            border-radius: 4px;
          }
          li {
            > span {
              &:first-child {
                display: inline-block;
                width: 43px;
                font-size: 16px;
                color: hsla(0, 0%, 100%, 0.5);
              }
            }

            .dot {
              display: inline-block;
              width: 71px;
              height: 36px;
              font-family: PingFangSC-Medium;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #c3cadf;
            }
            margin-bottom: 5px;
            height: 36px;
            overflow: hidden;
            display: flex;
            align-items: center;
            .logo {
              width: 26px;
              height: 26px;
              background-color: #fd7f2c;
              border-radius: 50%;
              margin-right: 10px;
              border: solid 2px rgba(255, 255, 255, 0.7);
            }
            > div {
              position: absolute;
              right: 15px;
              span {
                &:nth-child(1) {
                  font-size: 14px;
                  font-weight: normal;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #ffffff;
                }
                &:nth-child(2) {
                  width: 28px;
                  height: 14px;
                  font-size: 14px;
                  font-weight: normal;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #c3cadf;
                }
              }
            }
          }
        }
      }
    }
  }
  .empty {
    padding: 60px;
    text-align: center;
    margin-top: 80px;
    img {
      width: 180px;
      height: 180px;
    }

    p {
      font-size: 14px;
      letter-spacing: 0px;
      color: #888888;
      margin-top: -30px;
    }
  }
  #line {
    width: 100%;
    height: 200px;
  }
  .whatImg01 {
    width: 14px;
    height: 14px;
    // margin-left: 8px;
    cursor: pointer;
    margin-left: -8px;
  }

  .zwsj {
    font-size: 14px;
    color: #c3cadf;
    position: absolute;
    left: 50%;
    top: 220px;
    transform: translateX(-50%);
    opacity: 0.7;
  }
  .zwsj1 {
    padding-top: 26px;
    font-size: 14px;
    color: #c3cadf;
    text-align: center;
    // margin-left: 5px;
    img {
      text-align: center;
      width: 180px;
      height: 180px;
      margin: auto;
    }
    // position: absolute;
    // left: 200px;
    // top: 220px;
    p {
      text-align: center;
      font-size: 14px;
      color: #c3cadf;
      margin-top: -29px;
      opacity: 0.7;
    }
  }
  .zwsj2 {
    margin-left: 19px !important;
  }
  .is_shop {
    height: 60px;
    line-height: 60px;
    font-size: 60px;
    font-style: normal;
    color: #fff;
    text-align: center;
    font-family: DINAlternate-Bold;
    margin-bottom: 12px;
    letter-spacing: 1px;
  }
  .qr_boxL {
    .qr {
      display: none;
    }
    &:hover .qr {
      display: inline-block;
    }
  }
  .payVipBox {
    position: absolute;
    width: 920px;
    height: 682px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
  }
}
</style>
